<script setup>
import { useScroll } from '@vueuse/core'
const { y } = useScroll(window)

const backTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 平滑效果
  })
}
</script>

<template>
  <div class="backtop-container" :class="{ active: y > 700 }" @click="backTop">
    <svg class="icon font" aria-hidden="true">
      <use xlink:href="#icon-fanhuidingbu"></use>
    </svg>
  </div>
</template>

<style lang="scss" scoped>
.backtop-container {
  position: fixed;
  bottom: 0.5rem;
  right: 0.4rem;
  transform: translateX(200%);
  width: 0.5rem;
  height: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0.1rem #ccc;
  transition: all 0.4s;
  &:hover {
    box-shadow: 0 0 0.2rem #ccc;
    .font {
      color: #409eff;
    }
  }
  &.active {
    transform: none;
  }

  .font {
    color: #a3a3a3;
    font-size: 0.2rem;
    transition: all 0.3s;
  }
}
</style>
